<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<link href="dropdown.css" rel="stylesheet" type="text/css">
</head>
<body>

<section>
<div class="language_selected">热门<span class="caret"></span></div> 
<div class="language_list"> 
<ul> 
<li>导航一</li> 
<li>导航二</li> 
</ul> 
</div> 
</section>

<section>
<div class="language_selected">综合<span class="caret"></span></div> 
<div class="language_list"> 
<ul> 
<li>导航一</li> 
<li>导航二</li> 
</ul> 
</div> 
</section>

<script type="text/javascript">
$(document).ready(function() { 
//语言头部的点击事件，显示语言列表 
$(".language_selected").click(function(e) { 
$(this).parent().siblings().find('.language_list').hide();
$(this).next().toggle(); 
e.stopPropagation(); //阻止事件冒泡，否则事件会冒泡到下面的文档点击事件 
}); 
//点击文档时，隐藏语言列表 
$(document).click(function() { 
$(".language_list").hide(); 
}); 
}); 
</script>
</body>
</html>
